<template>
  <view class="payment-detail">
    <!-- 状态卡片 -->
    <view class="status-card" :class="detail.status">
      <view class="status-info">
        <text class="status-text">{{ detail.statusText }}</text>
        <text class="desc">{{ getStatusDesc(detail.status) }}</text>
      </view>
      <image :src="getStatusImage(detail.status)" mode="aspectFit" class="status-image" />
    </view>
    
    <!-- 医院信息 -->
    <view class="info-card">
      <view class="hospital-info" @tap="navigateToHospital">
        <image :src="detail.hospitalLogo" mode="aspectFit" class="logo" />
        <view class="info">
          <text class="name">{{ detail.hospitalName }}</text>
          <text class="address">{{ detail.hospitalAddress }}</text>
        </view>
        <text class="iconfont icon-arrow-right"></text>
      </view>
      
      <view class="divider"></view>
      
      <view class="department-info">
        <image :src="detail.departmentIcon" mode="aspectFit" class="icon" />
        <view class="info">
          <text class="name">{{ detail.departmentName }}</text>
          <text class="doctor">{{ detail.doctorName }} {{ detail.doctorTitle }}</text>
        </view>
      </view>
    </view>
    
    <!-- 缴费明细 -->
    <view class="detail-card">
      <view class="section-title">缴费明细</view>
      <view class="item-list">
        <view 
          class="item"
          v-for="(item, index) in detail.items"
          :key="index"
        >
          <view class="item-info">
            <text class="name">{{ item.name }}</text>
            <text class="desc">{{ item.desc }}</text>
          </view>
          <text class="amount">¥{{ item.amount }}</text>
        </view>
      </view>
      <view class="total">
        <text>合计</text>
        <text class="amount">¥{{ detail.totalAmount }}</text>
      </view>
    </view>
    
    <!-- 缴费信息 -->
    <view class="detail-card">
      <view class="section-title">缴费信息</view>
      <view class="info-list">
        <view class="info-item">
          <text class="label">就诊人</text>
          <text class="value">{{ detail.patientName }}</text>
        </view>
        <view class="info-item">
          <text class="label">就诊卡号</text>
          <text class="value">{{ detail.cardNo }}</text>
        </view>
        <view class="info-item">
          <text class="label">缴费时间</text>
          <text class="value">{{ detail.payTime }}</text>
        </view>
        <view class="info-item">
          <text class="label">订单编号</text>
          <text class="value">{{ detail.orderNo }}</text>
        </view>
        <view class="info-item">
          <text class="label">支付方式</text>
          <text class="value">{{ detail.paymentMethod }}</text>
        </view>
      </view>
    </view>
    
    <!-- 底部按钮 -->
    <view class="bottom-bar">
      <block v-if="detail.status === 'unpaid'">
        <view class="amount-info">
          <text>需付金额</text>
          <text class="amount">¥{{ detail.totalAmount }}</text>
        </view>
        <button class="pay-btn primary-btn" @tap="goPay">立即支付</button>
      </block>
      <block v-else-if="detail.status === 'completed'">
        <button 
          class="action-btn"
          @tap="applyRefund"
          v-if="canRefund"
        >申请退款</button>
        <button 
          class="action-btn"
          @tap="viewInvoice"
          v-if="detail.hasInvoice"
        >查看发票</button>
      </block>
    </view>
  </view>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'

// 缴费详情数据
const detail = ref({
  id: 1,
  hospitalName: '澳门镜湖医院',
  hospitalLogo: '/static/hospital/kiang-wu.jpg',
  hospitalAddress: '澳门连胜马路33号',
  departmentName: '心内科',
  departmentIcon: '/static/department/cardiology.png',
  doctorName: '张医生',
  doctorTitle: '主任医师',
  patientName: '张三',
  cardNo: '1234567890',
  status: 'unpaid', // unpaid-待支付 completed-已完成 refunded-已退款
  statusText: '待支付',
  payTime: '2024-03-25 09:30:00',
  orderNo: 'P202403250001',
  paymentMethod: '微信支付',
  items: [
    {
      name: '挂号费',
      desc: '普通门诊',
      amount: 60
    },
    {
      name: '检查费',
      desc: '心电图检查',
      amount: 180
    },
    {
      name: '药品费',
      desc: '处方药品',
      amount: 120
    }
  ],
  totalAmount: 360,
  hasInvoice: true
})

// 是否可以退款(24小时内)
const canRefund = computed(() => {
  if (detail.value.status !== 'completed') return false
  const payTime = new Date(detail.value.payTime).getTime()
  const now = Date.now()
  return now - payTime <= 24 * 60 * 60 * 1000
})

// 获取状态描述
const getStatusDesc = (status) => {
  const desc = {
    unpaid: '请在15分钟内完成支付',
    completed: '支付成功',
    refunded: '退款已完成'
  }
  return desc[status] || ''
}

// 获取状态图片
const getStatusImage = (status) => {
  return `/static/payment/status-${status}.png`
}

// 跳转到医院详情
const navigateToHospital = () => {
  uni.navigateTo({
    url: `/pages/hospital/detail?id=${detail.value.hospitalId}`
  })
}

// 去支付
const goPay = () => {
  uni.navigateTo({
    url: `/pages/payment/index?id=${detail.value.id}`
  })
}

// 申请退款
const applyRefund = () => {
  uni.showModal({
    title: '申请退款',
    content: '确定要申请退款吗？',
    success: (res) => {
      if (res.confirm) {
        // 调用退款接口
        console.log('申请退款:', detail.value.id)
      }
    }
  })
}

// 查看发票
const viewInvoice = () => {
  uni.navigateTo({
    url: `/pages/payment/invoice?id=${detail.value.id}`
  })
}

onMounted(() => {
  const pages = getCurrentPages()
  const page = pages[pages.length - 1]
  const id = page.$page?.options?.id
  
  // 加载缴费详情
  loadPaymentDetail(id)
})

// 加载缴费详情
const loadPaymentDetail = (id) => {
  // 这里调用API获取数据
  console.log('加载缴费详情:', id)
}
</script>

<style lang="scss">
.payment-detail {
  min-height: 100vh;
  background: $bg-color;
  padding-bottom: 120rpx;
  
  .status-card {
    position: relative;
    background: $primary-gradient;
    padding: 40rpx 30rpx;
    overflow: hidden;
    
    .status-info {
      position: relative;
      z-index: 1;
      
      .status-text {
        font-size: 40rpx;
        color: #fff;
        font-weight: bold;
        margin-bottom: 12rpx;
        display: block;
      }
      
      .desc {
        font-size: 26rpx;
        color: rgba(255,255,255,0.9);
      }
    }
    
    .status-image {
      position: absolute;
      right: 30rpx;
      bottom: 0;
      width: 200rpx;
      height: 200rpx;
      opacity: 0.2;
    }
    
    &.unpaid {
      background: linear-gradient(135deg, $warning, lighten($warning, 10%));
    }
    
    &.completed {
      background: linear-gradient(135deg, $success, lighten($success, 10%));
    }
    
    &.refunded {
      background: linear-gradient(135deg, $text-secondary, lighten($text-secondary, 10%));
    }
  }
  
  .info-card {
    margin: 20rpx;
    background: #fff;
    border-radius: $radius-lg;
    padding: 30rpx;
    box-shadow: $shadow-sm;
    
    .hospital-info {
      display: flex;
      align-items: center;
      margin-bottom: 20rpx;
      
      .logo {
        width: 80rpx;
        height: 80rpx;
        border-radius: $radius-sm;
        margin-right: 20rpx;
      }
      
      .info {
        flex: 1;
        
        .name {
          font-size: 32rpx;
          color: $text-primary;
          font-weight: bold;
          margin-bottom: 8rpx;
          display: block;
        }
        
        .address {
          font-size: 26rpx;
          color: $text-regular;
        }
      }
      
      .icon-arrow-right {
        font-size: 24rpx;
        color: $text-secondary;
      }
    }
    
    .divider {
      height: 1rpx;
      background: #eee;
      margin: 20rpx 0;
    }
    
    .department-info {
      display: flex;
      align-items: center;
      
      .icon {
        width: 60rpx;
        height: 60rpx;
        margin-right: 20rpx;
      }
      
      .info {
        .name {
          font-size: 30rpx;
          color: $text-primary;
          font-weight: bold;
          margin-bottom: 4rpx;
          display: block;
        }
        
        .doctor {
          font-size: 26rpx;
          color: $text-regular;
        }
      }
    }
  }
  
  .detail-card {
    margin: 20rpx;
    background: #fff;
    border-radius: $radius-lg;
    padding: 30rpx;
    box-shadow: $shadow-sm;
    
    .item-list {
      .item {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        margin-bottom: 20rpx;
        
        &:last-child {
          margin-bottom: 0;
        }
        
        .item-info {
          flex: 1;
          margin-right: 20rpx;
          
          .name {
            font-size: 28rpx;
            color: $text-primary;
            margin-bottom: 4rpx;
            display: block;
          }
          
          .desc {
            font-size: 24rpx;
            color: $text-secondary;
          }
        }
        
        .amount {
          font-size: 30rpx;
          color: $text-primary;
          font-weight: bold;
        }
      }
    }
    
    .total {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      margin-top: 20rpx;
      padding-top: 20rpx;
      border-top: 1rpx solid #eee;
      
      text {
        font-size: 28rpx;
        color: $text-regular;
        margin-right: 20rpx;
        
        &.amount {
          font-size: 36rpx;
          color: $danger;
          font-weight: bold;
        }
      }
    }
    
    .info-list {
      .info-item {
        display: flex;
        justify-content: space-between;
        margin-bottom: 16rpx;
        
        &:last-child {
          margin-bottom: 0;
        }
        
        .label {
          font-size: 26rpx;
          color: $text-regular;
        }
        
        .value {
          font-size: 26rpx;
          color: $text-primary;
        }
      }
    }
  }
  
  .bottom-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 20rpx 30rpx;
    background: #fff;
    box-shadow: $shadow-lg;
    display: flex;
    justify-content: space-between;
    align-items: center;
    
    .amount-info {
      text {
        font-size: 26rpx;
        color: $text-regular;
        margin-right: 12rpx;
      }
      
      .amount {
        font-size: 36rpx;
        color: $danger;
        font-weight: bold;
      }
    }
    
    .pay-btn {
      width: 240rpx;
    }
    
    .action-btn {
      flex: 1;
      height: 80rpx;
      line-height: 80rpx;
      font-size: 28rpx;
      color: $primary-color;
      background: $primary-light;
      border-radius: $radius-xl;
      margin: 0 10rpx;
      
      &:active {
        transform: scale(0.98);
      }
    }
  }
}
</style> 